
var drawS={
    cavs:$('#canvasban'),
    context:$('#canvasban')[0].getContext('2d'),
    colorBoard:$('#colorBoard'),
    lineRu:$('#lineRu'),
    suo:false,
    arr:[],
    init:function(){
        this.context.lineCap='round';//起始和结尾样式
        this.context.lineJoin='round';//转弯样式
        this.draw();
        this.btnF();
    },
    draw:function(){
        
        var cavs=this.cavs,
            self=this;
        var cavs_x=cavs.offset().left,
            cavs_y=cavs.offset().top;
            cavs.mousedown(function(e){
                e=e||window.event;
                self.suo=true;
                var new_x=e.pageX-cavs_x,
                    new_y=e.pageY-cavs_y;
                self.context.beginPath();
                self.context.moveTo(new_x,new_y);

                cavs.mousemove(function(e){
                    if(self.suo){
                        self.context.lineTo(e.pageX-cavs_x,e.pageY-cavs_y);
                        self.context.stroke();
                    }

                })
                cavs.mouseup(function(){
                    self.context.closePath();
                    self.suo=false;
                })
                cavs.mouseleave(function(){
                    self.context.closePath();
                    self.suo=false;
                })
                var arrData=self.context.getImageData(0,0,self.cavs[0].width,self.cavs[0].height);
                self.arr.push(arrData);
              
            })
    },
    btnF:function(){
        var self=this;
        $('.btn-list').on('click',function(e){
            var e=e||window.event;
            switch(e.target.id){
                case 'clearBoard':
                self.context.clearRect(0,0,self.cavs[0].width,self.cavs[0].height)
                break
                case 'xiangP':
                self.context.strokeStyle='#fff'
                break
                case 'chexiao':
                self.context.putImageData(self.arr.pop(),0,0);
                break
            }
        })
        this.colorBoard.change(function(e){
            self.context.strokeStyle=$(this).val();
        })
        this.lineRu.change(function(e){
            self.context.lineWidth=$(this).val();
        })

    }
}
drawS.init();